<template>
  <div>
    <div class="box">
      <button @click="quan">{{ ass }}</button>

      <svg id="sbgg" width="50%" height="50%" viewBox="0 0 1088 529" version="1.1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
          <path
            d="M0,16 L0,12 C0,10 0.5,9 1,8 C2.99325787,4.01348427 12,0 16,0 L48,0 C52,0 61,4 63,8 C63.5,9 64,10 64,12 L64,16 L0,16 Z"
            id="path-j-9x5o09lb-1"></path>
          <mask id="mask-j-9x5o09lb-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0"
            width="64" height="16" fill="white">
            <use xlink:href="#path-j-9x5o09lb-1"></use>
          </mask>
        </defs>
        <g id="kunming5" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="电子看板" transform="translate(-6.000000, -12.000000)">
            <polygon id="border" fill="#1A1F28" fill-rule="nonzero"
              points="6 491.616541 28.9473684 251 38.9473684 150 102.947368 89 337.578947 89 515.774436 93.1203008 695.473684 67.556391 760.241154 59 981.992566 59 997.729323 75.8270677 1002.99248 102.142857 1009.7594 128.458647 1022.54135 150 1050.3609 172.819549 1093.21805 186.353383 1093.94737 234 1093.21805 279.6 1093.94737 328 1093.94737 381 1093.21805 448.759398 818.781955 394 789.458647 394 758.631579 400.639098 728.556391 411.917293 695.473684 435.977444 672.917293 465.300752 651.112782 491.616541 613.518797 541 372.165414 541 345.097744 523.947368 306 515.676692">
            </polygon>
            <path
              d="M938,340.084116 L938,334.084116 C938,328.484116 942.4,324.084116 948,324.084116 L978,324.084116 C983.6,324.084116 988,328.484116 988,334.084116 L988,340.084116 C988,345.684116 983.6,350.084116 978,350.084116 L948,350.084116 C942.4,350.084116 938,345.684116 938,340.084116 Z M281,237.084116 L281,219.084116 C281,213.484116 285.4,209.084116 291,209.084116 L361,209.084116 C366.6,209.084116 371,213.484116 371,219.084116 L371,237.084116 L281,237.084116 Z M750,276.084116 L750,246.084116 C750,240.484116 754.4,236.084116 760,236.084116 L1023,236.084116 C1028.6,236.084116 1033,240.484116 1033,246.084116 L1033,276.084116 C1033,281.684116 1028.6,286.084116 1023,286.084116 L760,286.084116 C754.4,286.084116 750,281.684116 750,276.084116 Z M725,222.084116 L725,160.084116 C725,154.484116 729.4,150.084116 735,150.084116 L1023,150.084116 C1028.6,150.084116 1033,154.484116 1033,160.084116 L1033,222.084116 C1033,227.684116 1028.6,232.084116 1023,232.084116 L735,232.084116 C729.4,232.084116 725,227.684116 725,222.084116 Z M440.856631,179.241522 L456.916125,144.801826 C459.282787,139.726502 465.130062,137.598269 470.205385,139.964931 L585.306474,193.63745 C590.381798,196.004112 592.510032,201.851387 590.143369,206.926711 L574.083875,241.366406 C571.717213,246.44173 565.869938,248.569964 560.794615,246.203302 L445.693526,192.530782 C440.618202,190.16412 438.489968,184.316846 440.856631,179.241522 Z M281,251.084116 L281,233.084116 L371,233.084116 L371,251.084116 C371,256.684116 366.6,261.084116 361,261.084116 L291,261.084116 C285.4,261.084116 281,256.684116 281,251.084116 Z M324,275.084116 C327.013852,275.084116 335.986148,275.084116 339,275.084116 L577,275.084116 C582.6,275.084116 587,279.484116 587,285.084116 L587,497.084116 C587,502.684116 582.6,507.084116 577,507.084116 L339,507.084116 C333.4,507.084116 329,502.684116 329,497.084116 C329,497.084116 325.1,469.984116 324,468.284116 C322.9,466.584116 318.9,466.084116 318.9,466.084116 L65,466.084116 C59.4,466.084116 55,461.684116 55,456.084116 L55,285.084116 C55,279.484116 59.4,275.084116 65,275.084116 L324,275.084116 Z"
              id="rooms" stroke-opacity="0.8" stroke="#313030" stroke-width="4" fill-opacity="0.8" fill="#262B2F"
              fill-rule="nonzero"></path>
            <g id="group_track" transform="translate(74.000000, 114.000000)">
              <g id="grp_gray" transform="translate(0.000000, 32.266072)" fill="#666666" fill-rule="nonzero">
                <path
                  d="M374.71589,16.1347763 L535,90.7339279 L588,90.7339279 L589.005862,92.7339279 L490,92.7339279 L365.870654,34.9473919 L366.71589,33.1347763 L490,90.7339279 L530,90.7339279 L373.870654,17.9473919 L374.71589,16.1347763 Z M383.298628,0 L537,71.7339279 L568,71.7339279 L570,73.7339279 L536.5,73.7339279 L382.453392,1.81261557 L383.298628,0 Z"
                  id="line_engineer"></path>
                <polygon id="line_cross"
                  points="818 209.733928 787 201.233928 756 209.733928 755 207.733928 783 200.233928 755 192.733928 756 190.733928 787 199.233928 818 190.733928 819 192.733928 791 200.233928 819 207.733928">
                </polygon>
                <polygon id="line_26"
                  points="461 383.733928 513 383.733928 570.5 326.233928 572 327.733928 514 385.733928 461 385.733928">
                </polygon>
                <polygon id="line_20" points="665 19.7339279 665 17.7339279 950 17.7339279 950 19.7339279"></polygon>
                <polygon id="line_19" points="665 37.7339279 665 35.7339279 950 35.7339279 950 37.7339279"></polygon>
                <polygon id="line_15" points="665 125.733928 665 123.733928 950 123.733928 950 125.733928"></polygon>
                <polygon id="line_12" points="201 79.7339279 201 77.7339279 305 77.7339279 305 79.7339279"></polygon>
                <polygon id="line_11" points="0 104.733928 2.84217094e-14 102.733928 429 102.733928 431 104.733928">
                </polygon>
              </g>
              <g id="area_light_blue" transform="translate(665.000000, 86.000000)" fill="#2FB8FC" fill-rule="nonzero">
                <polygon id="line_18" points="9.09494702e-13 2 1.59161573e-12 0 285 2.84217094e-13 285 2"></polygon>
                <polygon id="line_17" points="6.82121026e-13 20 0 18 285 18 285 20"></polygon>
                <polygon id="line_16" points="0 54 0 52 285 52 285 54"></polygon>
              </g>
              <polyline id="area_pink" fill="#FF988E" fill-rule="nonzero"
                points="500 376 522.029503 376.000066 538 360 500 360 500 358 571 358 687 242 661 242 588 314 556 314 539.029796 332 500 332 500 330 538 330 553 314 500 314 500 312 587 312 658 242 629 242 602.04825 269.125415 602 269 573 269 555 287 500 287 500 285 554 285 570 269 500 269 500 267 601.629943 266.715295 626 242 500 242 500 240 597 240 581 224 500 224 500 222 582 222 600 240 1008 240 1008 242 690 242 572 360 541 360 523 378 500 378">
              </polyline>
              <g id="area_orange" transform="translate(0.000000, 222.000000)" fill="#FE8A26">
                <polygon @click="bcc" id="line_8b" class="xian" points="0 0 250 0 250 2 0 2"></polygon>
                <polygon @click="bcc" id="line_7b" class="xian" points="0 18 250 18 250 20 0 20"></polygon>
                <polygon @click="bcc" id="line_6b" class="xian" points="0 45 250 45 250 47 0 47"></polygon>
                <polygon @click="bcc" id="line_5b" class="xian" points="0 63 250 63 250 65 0 65"></polygon>
                <polygon @click="bcc" id="line_4b" class="xian" points="0 90 250 90 250 92 0 92"></polygon>
                <polygon @click="bcc" class="xian" id="line_3b" points="0 108 250 108 250 110 0 110"></polygon>
                <polygon @click="bcc" id="line_8a" class="xian" points="250 0 500 0 500 2 250 2"></polygon>
                <polygon @click="bcc" id="line_7a" class="xian" points="250 18 500 18 500 20 250 20"></polygon>
                <polygon @click="bcc" id="line_6a" class="xian" points="250 45 500 45 500 47 250 47"></polygon>
                <polygon @click="bcc" id="line_5a" class="xian" points="250 63 500 63 500 65 250 65"></polygon>
                <polygon @click="bcc" id="line_4a" class="xian" points="250 90 500 90 500 92 250 92"></polygon>
                <polygon @click="bcc" id="line_3a" class="xian" points="250 108 500 108 500 110 250 110"></polygon>
                <polygon @click="bcc" id="line_2a" class="xian" points="270 136 500 136 500 138 270 138"></polygon>
                <polygon @click="bcc" id="line_1a" class="xian" points="270 154 500 154 500 156 270 156"></polygon>
              </g>
              <g id="area_purple" transform="translate(0.000000, 177.000000)" fill="#8D00A1">
                <polygon id="line_10b" points="0 0 250 0 250 2 0 2"></polygon>
                <rect id="line_9b" x="0" y="18" width="250" height="2"></rect>
                <polygon id="line_10a" points="250 0 500 0 500 2 250 2"></polygon>
                <rect id="line_9a" x="250" y="18" width="250" height="2"></rect>
              </g>
              <path
                d="M0,110 L201,110 L201,112 L0,112 L0,110 Z M630,223 L686,223 L613,150 L443,150 L405,112 L305,112 L305,110 L406,110 L444,148 L611,148 L600,137 L602,136 L689,223 L1008,223 L1008,225 L629,225 L601,197 L500,197 L500,195 L599,195 L583,179 L500,179 L500,177 L584,177 L630,223 Z"
                id="area_red" fill="#B40F0F" fill-rule="nonzero"></path>
              <polygon id="area_green" fill="#1CC25E" fill-rule="nonzero"
                points="600 137 485 22 20 22 20 20 577 20 578 22 549 22 577 50 665 50 665 52 609 52 625 68 665 68 665 70 624 70 606 52 579 52 613 86 665 86 665 88 615 88 631 104 665 104 665 106 630 106 546 22 488 22 516 50 547 50 635 138 665 138 665 140 637 140 653 156 665 156 665 158 652 158 546 52 518 52 602 136">
              </polygon>
              <polygon id="area_blue" fill="#4435FF" fill-rule="nonzero"
                points="577 20 595 2 20 2 20 3.41060513e-13 920 0 920 2 598 2 578 22"></polygon>
            </g>
            <g id="grp_train" transform="translate(6.000000, 43.000000)">
              <g id="平板车" transform="translate(161.000000, 0.000000)" fill-rule="nonzero">
                <polygon id="路径" fill="#F59A23" points="0 16 1.02857143 12 46.9714286 12 48 16"></polygon>
                <polygon id="路径" fill-opacity="0.5" fill="#FFFFFF" points="4 16 7.57446809 0 40.4255319 0 44 16">
                </polygon>
              </g>
              <g @click="yi" ref="hhh" id="列车" fill-rule="nonzero">
                <path @click="bc" class="bbb"
                  d="M48,1 C50.0452357,1 53.4582308,2.13269129 56.471921,3.73999273 C58.9796173,5.07743073 61.2518534,6.73977482 62.1055728,8.4472136 C62.5496711,9.3354102 63,10.2222222 63,12 L63,12 L63,15 L1,15 L1,12 C1,10.2222222 1.45032889,9.3354102 1.89442719,8.4472136 C2.74601393,6.74404012 5.02137784,5.08087044 7.53228425,3.74172035 C10.545008,2.13493434 13.9562798,1 16,1 L16,1 Z"
                  id="路径" stroke="#409EFF" stroke-width="2" fill="#C8E2F9"></path>
                <path d="M7,13 L7,6.5 C6,6.5 3,9 3,11 L3,13 L7,13 Z" id="路径" fill="#409EFF"></path>
                <path d="M61,13 L61,6.5 C60,6.5 57,9 57,11 L57,13 L61,13 Z" id="路径备份" fill="#409EFF"
                  transform="translate(59.000000, 9.750000) scale(-1, 1) translate(-59.000000, -9.750000) "></path>
                <animateMotion values="" rotate="auto" dur="5s" repeatCount="0"
                  path=" M90,340.084116  L568,340.084116,568,295.084116,1008,295.084116 " />
                <!-- M90,340.084116  L568,340.084116,568,295.084116,1008,295.084116 -->
              </g>

              <g id=" 工程车" transform="translate(90.000000, 0.000000)">
                <polygon id="路径" fill="#FFA100" fill-rule="nonzero"
                  points="5.56724473e-13 16 2.04636308e-12 4.5 4 0 40 0 44 4.5 44 16"></polygon>
                <polygon id="矩形" fill-opacity="0.5" fill="#694803"
                  points="1.8189894e-12 13 2 12 42 12 44 13 44 16 1.81890614e-12 16"></polygon>
                <polygon id="右" fill-opacity="0.5" fill="#694803" points="37 4 41 4 42 5 42 7 41 8 37 8 36 7 36 5">
                </polygon>
                <polygon id="右备份" fill-opacity="0.5" fill="#694803" points="3 4 7 4 8 5 8 7 7 8 3 8 2 7 2 5">
                </polygon>
              </g>
              <g id="停车位" transform="translate(80.000000, 0.000000)" fill-rule="nonzero">
                <use id="路径" stroke-opacity="0.4" stroke="#A3D0FD" mask="url(#mask-j-9x5o09lb-2)" stroke-width="4"
                  fill-opacity="0.1" fill="#000000" stroke-dasharray="1,1" xlink:href="#path-j-9x5o09lb-1"></use>
                <path d="M7,13 L7,6.5 C6,6.5 3,9 3,11 L3,13 L7,13 Z" id="路径" fill-opacity="0.2" fill="#409EFF"></path>
                <path d="M61,13 L61,6.5 C60,6.5 57,9 57,11 L57,13 L61,13 Z" id="路径备份" fill-opacity="0.2" fill="#409EFF"
                  transform="translate(59.000000, 9.750000) scale(-1, 1) translate(-59.000000, -9.750000) "></path>
              </g>
            </g>
            <g id="grp_single" transform="translate(19.000000, 12.000000)" fill-rule="nonzero">
              <g id="signal_3_2">
                <path
                  d="M28,11.5 C28,10.1 29.1,9 30.5,9 C31.9,9 33,10.1 33,11.5 C33,12.9 31.9,14 30.5,14 C29.1,14 28,12.9 28,11.5 Z"
                  id="white2" fill="#FFFFFF"></path>
                <path
                  d="M22,11.5 C22,10.1 23.1,9 24.5,9 C25.9,9 27,10.1 27,11.5 C27,12.9 25.9,14 24.5,14 C23.1,14 22,12.9 22,11.5 Z"
                  id="blue" fill="#22BBFD"></path>
                <polygon id="base" fill-opacity="0.3" fill="#FFFFFF" points="19 14 19 0 20 0 20 14"></polygon>
                <path
                  d="M12,2.5 C12,1.1 13.1,0 14.5,0 C15.9,0 17,1.1 17,2.5 C17,3.9 15.9,5 14.5,5 C13.1,5 12,3.9 12,2.5 Z"
                  id="white1" fill="#FFFFFF"></path>
                <path d="M6,2.5 C6,1.1 7.1,0 8.5,0 C9.9,0 11,1.1 11,2.5 C11,3.9 9.9,5 8.5,5 C7.1,5 6,3.9 6,2.5 Z"
                  id="red" fill="#F72840"></path>
                <path d="M0,2.5 C0,1.1 1.1,0 2.5,0 C3.9,0 5,1.1 5,2.5 C5,3.9 3.9,5 2.5,5 C1.1,5 0,3.9 0,2.5 Z"
                  id="green" fill="#3AE41F"></path>
              </g>
              <g id="signal_3" transform="translate(58.000000, 2.000000)">
                <polygon id="base" fill-opacity="0.3" fill="#FFFFFF" points="19 10 19 0 20 0 20 10"></polygon>
                <path
                  d="M12,2.5 C12,1.1 13.1,0 14.5,0 C15.9,0 17,1.1 17,2.5 C17,3.9 15.9,5 14.5,5 C13.1,5 12,3.9 12,2.5 Z"
                  id="white1" fill="#FFFFFF"></path>
                <path d="M6,2.5 C6,1.1 7.1,0 8.5,0 C9.9,0 11,1.1 11,2.5 C11,3.9 9.9,5 8.5,5 C7.1,5 6,3.9 6,2.5 Z"
                  id="red" fill="#F72840"></path>
                <path d="M0,2.5 C0,1.1 1.1,0 2.5,0 C3.9,0 5,1.1 5,2.5 C5,3.9 3.9,5 2.5,5 C1.1,5 0,3.9 0,2.5 Z"
                  id="green" fill="#3AE41F"></path>
              </g>
              <g id="signal_2" transform="translate(103.000000, 2.000000)">
                <path
                  d="M9,7.5 C9,6.1 10.1,5 11.5,5 C12.9,5 14,6.1 14,7.5 C14,8.9 12.9,10 11.5,10 C10.1,10 9,8.9 9,7.5 Z"
                  id="white2" fill="#FFFFFF"></path>
                <path d="M3,7.5 C3,6.1 4.1,5 5.5,5 C6.9,5 8,6.1 8,7.5 C8,8.9 6.9,10 5.5,10 C4.1,10 3,8.9 3,7.5 Z"
                  id="blue" fill="#22BBFD"></path>
                <polygon id="base" fill-opacity="0.3" fill="#FFFFFF" points="0 10 0 0 1 0 1 10"></polygon>
              </g>
              <g id="signal_32" transform="translate(142.000000, 0.000000)">
                <path d="M6,8.5 C6,7.1 7.1,6 8.5,6 C9.9,6 11,7.1 11,8.5 C11,9.9 9.9,11 8.5,11 C7.1,11 6,9.9 6,8.5 Z"
                  id="white2" fill="#FFFFFF"></path>
                <path
                  d="M12,8.5 C12,7.1 13.1,6 14.5,6 C15.9,6 17,7.1 17,8.5 C17,9.9 15.9,11 14.5,11 C13.1,11 12,9.9 12,8.5 Z"
                  id="blue" fill="#F72840"></path>
                <polygon id="base" fill-opacity="0.3" fill="#FFFFFF" points="19 14 19 0 20 0 20 14"></polygon>
                <path
                  d="M12,2.5 C12,1.1 13.1,0 14.5,0 C15.9,0 17,1.1 17,2.5 C17,3.9 15.9,5 14.5,5 C13.1,5 12,3.9 12,2.5 Z"
                  id="white1" fill="#3AE41F"></path>
                <path d="M6,2.5 C6,1.1 7.1,0 8.5,0 C9.9,0 11,1.1 11,2.5 C11,3.9 9.9,5 8.5,5 C7.1,5 6,3.9 6,2.5 Z"
                  id="red" fill="#FFFF00"></path>
                <path d="M0,2.5 C0,1.1 1.1,0 2.5,0 C3.9,0 5,1.1 5,2.5 C5,3.9 3.9,5 2.5,5 C1.1,5 0,3.9 0,2.5 Z"
                  id="green" fill="#3AE41F"></path>
              </g>
              <g id="signal_5" transform="translate(187.000000, 2.000000)">
                <path
                  d="M24,2.5 C24,1.1 25.1,0 26.5,0 C27.9,0 29,1.1 29,2.5 C29,3.9 27.9,5 26.5,5 C25.1,5 24,3.9 24,2.5 Z"
                  id="white2" fill="#FFFFFF"></path>
                <path
                  d="M18,2.5 C18,1.1 19.1,0 20.5,0 C21.9,0 23,1.1 23,2.5 C23,3.9 21.9,5 20.5,5 C19.1,5 18,3.9 18,2.5 Z"
                  id="blue" fill="#FFFF00"></path>
                <polygon id="base" fill-opacity="0.3" fill="#FFFFFF" points="31 10 31 0 32 0 32 10"></polygon>
                <path
                  d="M0,2.5 C0,1.1 1.1,8.8817842e-16 2.5,8.8817842e-16 C3.9,8.8817842e-16 5,1.1 5,2.5 C5,3.9 3.9,5 2.5,5 C1.1,5 0,3.9 0,2.5 Z"
                  id="white1" fill="#FFFF00"></path>
                <path
                  d="M12,2.5 C12,1.1 13.1,0 14.5,0 C15.9,0 17,1.1 17,2.5 C17,3.9 15.9,5 14.5,5 C13.1,5 12,3.9 12,2.5 Z"
                  id="red" fill="#F72840"></path>
                <path d="M6,2.5 C6,1.1 7.1,0 8.5,0 C9.9,0 11,1.1 11,2.5 C11,3.9 9.9,5 8.5,5 C7.1,5 6,3.9 6,2.5 Z"
                  id="green" fill="#3AE41F"></path>
              </g>
            </g>
          </g>
        </g>
      </svg>

      <hellow class="box1"></hellow>
    </div>

  </div>
</template>

<script>
import hellow from '../components/HelloWorld.vue'
export default {
  name: 'DomeHomeView',
  components: {
    hellow
  },

  data () {
    return {
      las: false,
      ass: '全屏',
      bbcf: 'M90,340.084116',
      s: '1000s'
    }
  },

  mounted () {
    const btns = document.getElementsByClassName('xian')
    console.log(btns)
    let i = 0
    for (i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        // console.log(this.bbcf)
        for (i = 0; i < btns.length; i++) {
          console.log(btns[i]) // 首先清空所有元素的样式
          btns[i].style.stroke = ''
        }
        this.style.stroke = 'red'// 当点击时，设置自己想要的样式
      }
    }
  },

  methods: {
    yi () {
      this.s = '10s'
      console.log(this.s)
      this.bbcf = ''
      console.log(this.bbcf)

      // this.$refs.hhh.style.transform = '100px,200px'
    },
    bc () {
      // const a = document.querySelectorAll('.bbb')

    },
    quan () {
      this.las = !this.las
      if (this.las === true) {
        this.ass = '恢复'
        const a = document.getElementById('sbgg')
        a.style.width = '100%'
        a.style.height = '100%'
      } else {
        this.ass = '全屏'
        const a = document.getElementById('sbgg')
        a.style.width = '50%'
        a.style.height = '50%'
      }
    },
    bcc () {
      console.log(11)
    }
  }
}
</script>

<style lang="css" scoped>
.box {
  width: 100%;
  height: 1000px;
  background-color: pink;
  position: relative;
}

.box1 {
  /* margin-left: -200px; */
  /* margin-top: -100px; */
  width: 1100px;
  height: 1100px;
  /* background-color: blue; */
  position: absolute;
  /* top: 100px; */
  /* left: -200px; */
}

.xian:hover {
  cursor: pointer;
}
</style>
